<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>Vue3实例</title>
		<!-- 导入 Vue 3 -->
		<script src="//cdn.jsdelivr.net/npm/vue@next"></script>
		<!-- 导入plus核心库 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus"></script>
		<!-- 导入环境适配代码 -->
		<script src="//cdn.jsdelivr.net/npm/@jiess/plus/lib/envVue3.js"></script>
	</head>
	<body>
	<body>
		<div id="root">
			<jiess :setup="setup" />
		</div>
		<script type="module">

			const VueCpt = {
				render() {
					return Vue.h('div', [
						this.$slots.default(),
						this.$slots.slot1(),
						this.$slots.slot2({ message: '这是vue作用域插槽回传数据' })
					])
				}
			};
			Vue.createApp({
				created() {
					this.setup = function() {
						this.add(
							this.render({
									is: VueCpt,
									// Jiess插槽和vue作用域插槽均使用$slots
									$slots: {
										slot1: '使用vue具名插槽',
										slot2: ({ message }) => message
									}
								},
								this.render({}, '未指定插槽名，则对应default插槽')
							)
						)
					}
				}
			}).use(new JiessEnv(JiessCore, Vue)).mount('#root');
		</script>
	</body>
</html>